<template>
  <div id="">
    <headerbox :headerTitle="'提现'" :hasBack='true'></headerbox>

    <div class="defaultBank" @click="toCardList" v-if="bankStore">
      <img :src="imgUrlLink(bankStore.ballBankType.logo)" alt="" width="50" height="50">
      <div>
        <h3>{{bankStore.ballBankType.bankName}}</h3>
        <span>尾号{{getBankNum4(bankStore.cardNum)}}银行卡</span>
      </div>
      <img src="@/assets/playcircleImage/arrow_right1.png" alt="" width="10">
    </div>
    <div class="noneBank" v-else @click="toCardList">
      开户银行
      <span>请选择开户银行</span>
      <img src="@/assets/playcircleImage/arrow_right1.png" alt="" width="10">
    </div>

    <div class="p10 bgWhite">
      <p>提现金额</p>
      <div class="cash">
        &yen;<input type="number" v-model="drawApplyJson.amount" name="" value="">
      </div>
      <div class="balance">
        可用余额 {{(accountInfo.balance).toFixed(2)}}
        <span @click="allDrawApply">全部提现</span>
      </div>
    </div>

    <div class="p10 cashBtn">
      <button type="button" name="button" class="blockButton" @click="drawApplyEvent">确认提现</button>
    </div>
  </div>
</template>
<script>
import {userAccountInfo,userDrawApply} from '@/utils/ajaxRequest.js';
import {mapState,mapMutations} from 'vuex';
export default {
  name: "",
  data: () => ({
    cardList:[],
    accountInfo:{balance:0},    //账户信息
    drawApplyJson:{
      token:'',
      bankCardId:'',
      amount:0,    //提现金额
    }
  }),
  components: {
  },
  computed: {
    ...mapState({
      bankStore:state=>state.bankChooseStore.bankStore,
    })
  },
  methods: {
    // 图片地址拼接
    imgUrlLink(imgurl) {
      return this.$imgUrlLink(imgurl);
    },
    // 获取账户信息
    getAccountInfo() {
      let self = this;
      let xlyd_loginInfo = JSON.parse(window.localStorage.getItem('xlyd_loginInfo'));
      userAccountInfo({token:xlyd_loginInfo.token}).then(res=>{
        console.log(res);
        if(res) {
          self.accountInfo = res.data.result;
        }
      })
    },
    // 获取银行卡最后四位
    getBankNum4(cardNum) {
      return cardNum.substr(cardNum.length-4);
    },
    // 银行卡列表
    toCardList() {
      this.$router.push({name:'banklist',params:{withdrawBank:true}});
    },
    // 全部提现
    allDrawApply() {
      this.drawApplyJson.amount = this.accountInfo.balance;
    },
    // 提现申请
    drawApplyEvent() {
      let self = this;
      let balance = self.accountInfo.balance;     //用户余额
      let drawApplyParam = this.drawApplyJson;

      if(drawApplyParam.amount==0) {
        self.toast('请输入提现金额');
      }else if(drawApplyParam.amount > balance){
        self.toast('提现金额太大，余额不够了~');
      }else {
        userDrawApply(drawApplyParam).then(res=>{
          console.log(res);
          if(res) {
            // self.toast(res.data.msg);
            self.messageBox.alert(res.data.msg).then(action=>{
              self.$router.go(-1);
            })
          }
        })
      }
    },
  },
  mounted() {
    //do something after mounting vue instance
    let xlyd_loginInfo = JSON.parse(window.localStorage.getItem('xlyd_loginInfo'));
    this.drawApplyJson.token = xlyd_loginInfo.token;
    this.getAccountInfo();
    console.log(this.bankStore);
    if(this.bankStore) {
      this.drawApplyJson.bankCardId = this.bankStore.id;
    }
  }
}
</script>
<style lang="scss" scoped>
.defaultBank{
  @include flex;
  background: white;
  padding: 15px 10px;
  margin: 10px 0;
  div{
    @include flexcell;
    margin-left: 10px;
    color: $lightColor;
    h3{
      font-weight: bold;
      color: #333;
    }
  }
}
.noneBank{
  @include flex;
  background: white;
  padding: 15px 10px;
  margin: 10px 0;
  span{
    @include flexcell;
    color: $lightColor;
    margin-left: 10px;
  }
}
.cash{
  font-size: 2.4rem;
  color: $redColor;
  border-bottom: 1px solid $boxBgcolor;
  padding: 20px;
  @include flex;
  input{
    width: 80%;
    font-size: 2.4rem;
    color: $redColor;
    margin-left: 10px;
  }
}
.balance{
  @include flex;
  justify-content: space-between;
  color: $lightColor;
  margin-top: 10px;
  span{
    color: $blueColor;
  }
}
.cashBtn{
  margin-top: 80px;
}
</style>
